<template>
    <div class="sdy-home-goods-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          class="goods-list-box"
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          :offset="100"
          @load="loadGoodsListHandler"
        >
          <div
            class="goods-item"
            v-for="item in goodsList"
            :key="item.proid"
           >
            <img :src="item.img1" alt="">
            <p class="title van-multi-ellipsis--l2">
              {{ item.proname }}
            </p>
            <p class="price">
              <span class="current">
                ￥ {{ item.issale ? (item.originprice * 10 / item.discount).toFixed(2) : item.originprice.toFixed(2) }}
              </span>
              <span class="old">
                ￥ {{ item.originprice.toFixed(2) }}
              </span>
            </p>
            <p class="tags">
              <van-tag type="danger">{{ item.category }}</van-tag>
              <van-tag type="primary">{{ item.brand }}</van-tag>
            </p>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive } from 'vue'
  // 导入请求相关接口
  import { goodsListApi } from '@/api/goods'
  // 导入 ts 相关接口
  import type { MyHotItem } from '@/config/interface'
  const loading = ref<boolean>(false)

  const finished = ref<boolean>(false)

  const refreshing = ref<boolean>(false)
  

  const goodsList = ref<MyHotItem[]>([])
  
  

  const goodsInfo = reactive({ count: 1, limitNum: 10 })
  

  const loadGoodsListHandler = async () => {
    setTimeout(async () => {
      const res = await goodsListApi(goodsInfo)

      goodsList.value = [ ...goodsList.value, ...res.data ]

      goodsInfo.count++
      loading.value = false
      if (!res.data.length) finished.value = true
    }, Math.random() * 1000 + 2000)
  }

  const onRefresh = () => {
    setTimeout(async () => {
      goodsInfo.count = Math.floor(Math.random() * 5 + 2)
      const res = await goodsListApi(goodsInfo)
      goodsList.value = res.data
      goodsInfo.count++
      refreshing.value = false
      finished.value = false
    }, Math.random() * 1000 + 2000)
  }
  </script>
  
  <style scoped lang="scss">
  @import '@/styles/variable.scss';
  .sdy-home-goods-list {
    box-sizing: border-box;
    padding: 0 15px;
  
    .goods-list-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
  
      .goods-item {
        width: 45%;
        border: 1px solid #333;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
        overflow: hidden;
        padding-bottom: 5px;
  
        > p {
          margin: 0;
        }
  
        > img {
          width: 100%;
          height: 170px;
          display: block;
        }
  
        > .title {
          font-size: 12px;
        }
  
        > .price {
          font-size: 12px;
          color: #ccc;
          width: 100%;
          display: flex;
          justify-content: space-evenly;
  
          > .current {
            font-size: 16px;
            color: $globalColor;
          }
  
          > .old {
            text-decoration: line-through;
          }
        }
  
        > .tags {
          width: 100%;
          display: flex;
          justify-content: space-evenly;
        }
      }
    }
  }
  </style>
  